import './WijmoB08.scss'
import { getData3 } from '../Data'

import * as wijmo from "@grapecity/wijmo";
import { FlexGrid } from '@grapecity/wijmo.react.grid'

import { Radio } from 'antd'

import { useMount } from "ahooks";
import { useState } from "react";

const WijmoB08 = () => {
    const [Data, setData] = useState()

    const colGroups1 = () => {
        const allocTemplate = (ctx) => (
            `<span class=${ctx.value > .2 ? "big-val" : "small-val"}>
                ${wijmo.Globalize.format(ctx.value, ctx.col.format)}
            </span>`
        )
        const amountTemplate = (ctx) => (
            `<span class=${ctx.value > 50000 ? "big-val" : "small-val"}> 
                ${wijmo.Globalize.format(ctx.value, ctx.col.format)}
            </span>`
        );
        return [
            { binding: 'name', header: 'Name', width: 150 },
            { binding: 'currency', header: 'Curr', width: 80, align: 'center' },
            {
                header: 'Perf', align: 'center', collapseTo: 'perf.ytd', columns: [
                    { binding: 'perf.ytd', header: 'YTD', format: 'p2', width: 100, cssClass: 'main-column' },
                    { binding: 'perf.m1', header: '1 M', format: 'p2', width: 80 },
                    { binding: 'perf.m6', header: '6 M', format: 'p2', width: 80 },
                    { binding: 'perf.m12', header: '12 M', format: 'p2', width: 80 },
                ]
            },
            {
                header: 'Allocation', align: 'center', collapseTo: 'alloc.amount', columns: [
                    { binding: 'alloc.stock', header: 'Stocks', format: 'p0', width: 80, cellTemplate: allocTemplate },
                    { binding: 'alloc.bond', header: 'Bonds', format: 'p0', width: 80, cellTemplate: allocTemplate },
                    { binding: 'alloc.cash', header: 'Cash', format: 'p0', width: 80, cellTemplate: allocTemplate },
                    { binding: 'alloc.other', header: 'Other', format: 'p0', width: 80, cellTemplate: allocTemplate },
                    { binding: 'alloc.amount', header: 'Amount', format: 'n0', width: 100, cssClass: 'main-column', cellTemplate: amountTemplate }
                ]
            }
        ];
    }
    const colGroups2 = () => {
        const allocTemplate = (ctx) => (
            `<span class=${ctx.value > .2 ? "big-val" : "small-val"}>
                ${wijmo.Globalize.format(ctx.value, ctx.col.format)}
            </span>`
        )
        const amountTemplate = (ctx) => (
            `<span class=${ctx.value > 50000 ? "big-val" : "small-val"}> 
                ${wijmo.Globalize.format(ctx.value, ctx.col.format)}
            </span>`
        );
        return [
            { binding: 'name', header: 'Name', width: 150 },
            { binding: 'currency', header: 'Curr', width: 80, align: 'center' },
            {
                header: 'Perf', align: 'center', columns: [
                    {
                        header: 'Short', align: 'center', collapseTo: 'perf.ytd', isCollapsed: true, columns: [
                            { binding: 'perf.ytd', header: 'YTD', format: 'p2', width: 100, cssClassAll: 'main-column' },
                            { binding: 'perf.m1', header: '1 M', format: 'p2', width: 80 },
                        ]
                    },
                    {
                        header: 'Long', align: 'center', collapseTo: 'perf.m12', isCollapsed: true, columns: [
                            { binding: 'perf.m6', header: '6 M', format: 'p2', width: 80 },
                            { binding: 'perf.m12', header: '12 M', format: 'p2', width: 100, cssClassAll: 'main-column' }
                        ]
                    },
                ]
            },
            {
                header: 'Allocation', align: 'center', collapseTo: 'alloc.amount', columns: [
                    { binding: 'alloc.stock', header: 'Stocks', format: 'p0', width: 80, cellTemplate: allocTemplate },
                    { binding: 'alloc.bond', header: 'Bonds', format: 'p0', width: 80, cellTemplate: allocTemplate },
                    {
                        header: 'Detail', align: 'center', columns: [
                            { binding: 'alloc.cash', header: 'Cash', format: 'p0', width: 80, cellTemplate: allocTemplate },
                            { binding: 'alloc.other', header: 'Other', format: 'p0', width: 80, cellTemplate: allocTemplate },
                        ]
                    },
                    { binding: 'alloc.amount', header: 'Amount', format: 'c0', width: 100, cssClassAll: 'main-column', cellTemplate: amountTemplate },
                ]
            },
        ];
    }

    const [Active, setActive] = useState(colGroups1())
    const onChange = (e) => {
        const Mapping = { 'A01': colGroups1(), 'A02': colGroups2() }
        setActive(Mapping[e.target.value])
    }

    useMount(() => { setData(getData3) })

    if (Data) {
        return (
            <div className='Page WijmoB08'>
                <Radio.Group defaultValue="A01" buttonStyle="solid" onChange={onChange}>
                    <Radio.Button value="A01">组合一</Radio.Button>
                    <Radio.Button value="A02">组合二</Radio.Button>
                </Radio.Group>
                <FlexGrid
                    columnGroups={Active}
                    itemsSource={Data}
                />

                <div>columnGroups  分组数据</div>
                <div>cssClass 不同组显示类型</div>
                <div>isCollapsed 折叠状态 默认false</div>

            </div>
        )
    }

}

export default WijmoB08;